<template>
    <div>
      <div class="header">
        <img src="./header.png" alt="">
      </div>
      <div class="warrp-reg">
        <p>立即下载体验</p>
        <a href="javascript:;" @click="getLink"></a>
      </div>
      <!--分享层-->
      <div class="shared-mask" v-show="isShow" @click="isShow = false">
            <p>请在浏览器中打开,点击下载</p>
      </div>
    </div>
</template>

<script>
  export default {
    data () {
      return {
        isShow: false
      }
    },
    methods: {
      /* eslint-disable*/
      getLink() {
        if( this.isWeixin() === true) {
          this.isShow = true;
          return false
        }
        window.location.href= this.$route.query.url
      },
      isWeixin () {
        let ua = window.navigator.userAgent.toLowerCase();
        // 这里判断不能写全等 不然不能正确判断
        /* eslint-disable*/
        if ( ua.match(/MicroMessenger/i)!='micromessenger' ) {
          return false;
        }
        return true;
      }
    }

  }
</script>

<style lang="stylus" rel="stylesheet/stylus">
  .header
    width: 100%;
    height: 0;
    position: relative;
    padding-top: 80%;
    img
      position: absolute;
      top: 0;
      left: 0;
      z-index: 1;
      width: 100%;
  .warrp-reg
    text-align: center
    margin-top: 100px
    color:#fff
    padding-bottom:20px
    p
      font-size: 13px
      padding: 20px 0px
    a
      width: 105px
      height: 107px
      line-height: 45px
      display: block
      text-align: center
      color: #fff
      background: url("./down.png") no-repeat center/100% 100%;
      margin: 0 auto
      border-radius: 30px
  .shared-mask
    position: fixed
    z-index: 1000
    top: 0
    left: 0
    width: 100%
    height: 100%
    background-image: url(./shareto.png)
    background-size: 30% 30%
    background-position: right top
    background-repeat: no-repeat
    background-color: rgba(7, 17, 27, .6)
    p
      color:#fff
      position:absolute
      top: 33%
      right:3%
</style>
